<template>
	<view class="all">
		<view class="wrap">
			<view class="total" :class="{ select: true, active: item.id === sel }" v-for="(item,index) in tabs" :key="index"
			 @click="select(item)">{{ item.label }}</view>
		</view>
		<view v-if="sel==3" class="section" v-for="(item,index) in shopsList" :key="index">
			<view v-if="item.type==1" class="sections">
				<view class="section-top">
					<text>PIAGET伯爵珠宝</text><text class="state">待取货</text>
				</view>
				<view class="section-mid">
					<view class="section-mid-left">
						
					</view>
					<view class="section-mid-right">
						<text>{{item.name}}</text>
						<view class="money-num">
							<text>￥{{item.money}}</text>
							<text>*{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="section-down">
					<text class="tm">总价￥{{item.money}}</text><text class="tm">优惠￥{{item.discounts}}</text><text>实付款￥{{item.paymoney}}</text>
				</view>
				<view class="button">
					<view class="button-1">取货信息</view>
				</view>
			</view>
			<view v-if="item.type==2" class="sections">
				<view class="section-top">
					<text>PIAGET伯爵珠宝</text><text class="state">已失效</text>
				</view>
				<view class="section-mid">
					<view class="section-mid-left">
						
					</view>
					<view class="section-mid-right">
						<text>{{item.name}}</text>
						<view class="money-num">
							<text>￥{{item.money}}</text>
							<text>*{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="section-down">
					<text class="tm">总价￥{{item.money}}</text><text class="tm">优惠￥{{item.discounts}}</text><text>实付款￥{{item.paymoney}}</text>
				</view>
				<view class="button">
					<view class="button-1">删除订单</view>
				</view>
			</view>
		</view>
		<view v-if="sel==1" class="section" v-for="(item,index) in shopsList" :key="index">
			<view v-if="item.type==1" class="sections">
				<view class="section-top">
					<text>PIAGET伯爵珠宝</text><text class="state">待取货</text>
				</view>
				<view class="section-mid">
					<view class="section-mid-left">
						
					</view>
					<view class="section-mid-right">
						<text>{{item.name}}</text>
						<view class="money-num">
							<text>￥{{item.money}}</text>
							<text>*{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="section-down">
					<text class="tm">总价￥{{item.money}}</text><text class="tm">优惠￥{{item.discounts}}</text><text>实付款￥{{item.paymoney}}</text>
				</view>
				<view class="button">
					<view class="button-1">取货信息</view>
				</view>
			</view>
		</view>
		<view v-if="sel==2" class="section" v-for="(item,index) in shopsList" :key="index">
			<view v-if="item.type==2" class="sections">
				<view class="section-top">
					<text>PIAGET伯爵珠宝</text><text class="state">已失效</text>
				</view>
				<view class="section-mid">
					<view class="section-mid-left">
						
					</view>
					<view class="section-mid-right">
						<text>{{item.name}}</text>
						<view class="money-num">
							<text>￥{{item.money}}</text>
							<text>*{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="section-down">
					<text class="tm">总价￥{{item.money}}</text><text class="tm">优惠￥{{item.discounts}}</text><text>实付款￥{{item.paymoney}}</text>
				</view>
				<view class="button">
					<view class="button-1">删除订单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				index: 0,
				background: ["color1", "color2", "color3"],
				indicatorDots: true,
				sel: 1,
				tabs: [{
						label: "待取货",
						id: 1
					},
					{
						label: "已完成",
						id: 2
					},
					{
						label: "全部订单",
						id: 3
					}
				],
				shopsList:[{
					type:1,
					name:'绿宝石钻石项链',
					money:'414,000',
					num:1,
					discounts:'78,000',
					paymoney:'336,000'
				},{
				type:2,
					name:'时来运转戒指',
					money:'246,000',
					num:1,
					discounts:'0',
					paymoney:'246,000'
				}],
				type: "default"
			}
		},
		methods: {
			select(item) {
				this.sel = item.id;
				console.log(this.sel)
			},
		}
	}
</script>

<style scoped>
	.all{
		width: 100%;
	}
	.wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #1F1F24;
		color: #FFFFFF;
	}

	.select.active {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #1F1F24;
		color:#F7B500;
		border-bottom: 4rpx solid #F7B500;
	}
	.section{
		width: 100%;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.sections{
		margin-top: 20rpx;
		width: 90%;
		height: 390rpx;
		background-color: #1F1F24;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
 .section-top{
	width: 92%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
 }
 .state{
	 font-size: 24rpx;
	 font-family: PingFangSC-Regular, PingFang SC;
	 font-weight: 400;
	 color: #FF933E;
 }
 .section-mid{
	 width: 92%;
	 display: flex;
	 justify-content: space-between;
	 
 }
 .section-mid-left{
	 width: 200rpx;
	 height: 130rpx;
	 background-color: #ffffff;
 }
 .section-mid-right{
	 width: 65%;
	 display: flex;
	 justify-content: space-between;
 }
 .section-mid-right>text{
	 
	 font-size: 28rpx;
	 font-family: PingFangSC-Regular, PingFang SC;
	 font-weight: 400;
	 color: #FFFFFF;
 }
 .money-num{
	 display: flex;
	 flex-direction: column;
	 align-items: flex-end;
	 opacity: 0.6;
	 font-size: 28rpx;
	 font-family: PingFangSC-Regular, PingFang SC;
	 font-weight: 400;
	 color: #FFFFFF;
 }
 .section-down{
	 width: 92%;
	 display: flex;
	 justify-content: space-between;
	 
	 font-size: 28rpx;
	 font-family: PingFangSC-Regular, PingFang SC;
	 font-weight: 400;
	 color: #FFFFFF;
 }
 .tm{
	 opacity: 0.4;
 }
 .button{
	 width: 92%;
	 display: flex;
	 justify-content: flex-end;
 }
 .button-1{
	 width: 200rpx;
	 height: 64rpx;
	 border-radius: 64rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 border: 1px solid #FFD351;
	 color: #F7B500;
	 
 }
</style>
